<template>
  <cs-card>
    <el-table
      v-loading="isLoading"
      ref="multipleTable"
      :data="equipmentTableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="selectionChange"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="companyName" label="企业名称"> </el-table-column>
      <el-table-column prop="siteName" label="站点名称" width="150"> </el-table-column>
      <el-table-column label="站点联系人" width="150">
        <template slot-scope="scope">
          <cs-text type=""
            >{{ scope.row.siteAgent }} <br />
            {{ scope.row.phone }}</cs-text
          >
        </template>
      </el-table-column>
      <el-table-column prop="location" label="站点位置" width="350"> </el-table-column>
      <el-table-column prop="siteId" label="站点编号" width="180"> </el-table-column>
      <el-table-column prop="siteStatus" label="状态" width="100">
        <template v-slot="scoped">
          <span v-if="scoped.row.siteStatus === null">{{ '—' }}</span>
          <cs-text :type="scoped.row.siteStatus === 0 ? 'primary' : 'danger2'" v-else>{{
            scoped.row.siteStatus === 0 ? '正常' : '异常'
          }}</cs-text>
        </template>
      </el-table-column>
      <el-table-column prop="weighingStatus" label="称重设备" width="100">
        <template v-slot="scoped">
          <span v-if="scoped.row.weighingStatus === null">{{ '—' }}</span>
          <cs-text :type="scoped.row.weighingStatus === 0 ? 'primary' : 'danger2'" v-else>{{
            scoped.row.weighingStatus === 0 ? '在线' : '离线'
          }}</cs-text>
        </template>
      </el-table-column>
      <el-table-column prop="snapStatus" label="抓拍设备" width="100">
        <template v-slot="scoped">
          <span v-if="scoped.row.snapStatus === null">{{ '—' }}</span>
          <cs-text :type="scoped.row.snapStatus === 0 ? 'primary' : 'danger2'" v-else>{{
            scoped.row.snapStatus === 0 ? '在线' : '离线'
          }}</cs-text>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="zs" label="电子车端设备" width="200">
        <cs-text type="primary">正常</cs-text>
      </el-table-column> -->
    </el-table>
    <div id="pagination_section">
      <span class="currentSelect">{{ `共${totalCount}项` }}</span>
      <div class="pagination_right">
        <span>{{ `${pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="currentPage"
          :totalPage="totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
          @junkToOtherPage="junkToOtherPage"
        />
      </div>
    </div>
  </cs-card>
</template>

<script>
import csCard from '@/components/cs-card/cs-card.vue'
import csPagination from '@/components/cs-pagination/cs-pagination.vue'
import csText from '@/components/cs-text/cs-text.vue'

import {
  deviceMonitor,
  monitoringexport
} from '@/service/monitor/equipment_monitoring/equipment_monitoring'

export default {
  components: {
    csCard,
    csPagination,
    csText
  },
  data() {
    return {
      // 当前页码
      currentPage: 1,
      // 一页的条数
      pageSize: 10,
      // 总共多少条数据
      totalCount: 0,
      // 总共多少页
      totalPage: 0,
      currentSelect: 0,
      selectId: [],
      equipmentTableData: [],
      switchStatus: true,
      isLoading: false
    }
  },
  created() {
    this.getDeviceMonitorTable()
    this.$bus.$on('equipmentMonitoringSearch', (siteName) => {
      if (this.isLoading) return
      this.getDeviceMonitorTable(this.currentPage, this.pageSize, siteName)
    })
    this.$bus.$on('monitoringexportlist', (res) => {
      this.exportfn(res)
    })
  },
  beforeDestroy() {
    this.$bus.$off('alterInfodialogVisible')
    this.$bus.$off('deleteUserDialog')
    this.$bus.$off('alterPasswordDialogVisible')
    this.$bus.$off('distributionDialogVisible')
    this.$bus.$off('siteSelectNum')
  },
  methods: {
    async exportfn(info) {
      const texts = '共' + this.totalCount + '条数据下载中'
      const loading = this.$loading({
        lock: true,
        text: texts,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const { data } = await monitoringexport(info)
      if (!!data) {
        const filename = '设备监控表.xlsx'
        const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
          window.navigator.msSaveBlob(blob, decodeURI(filename))
        } else {
          // 创建新的URL并指向File对象或者Blob对象的地址
          const blobURL = window.URL.createObjectURL(blob)
          // 创建a标签，用于跳转至下载链接
          const tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = blobURL
          tempLink.setAttribute('download', decodeURI(filename))
          // 兼容：某些浏览器不支持HTML5的download属性
          if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
          }
          // 挂载a标签
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
          // 释放blob URL地址
          window.URL.revokeObjectURL(blobURL)
        }
        setTimeout(() => {
          loading.close()
        }, 2000)
      } else {
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    },
    alterInfodialogVisible() {
      this.$bus.$emit('alterInfodialogVisible')
    },
    deleteUserDialog() {
      this.$bus.$emit('deleteUserDialog')
    },
    alterPasswordDialogVisible() {
      this.$bus.$emit('alterPasswordDialogVisible')
    },
    distributionDialogVisible() {
      this.$bus.$emit('distributionDialogVisible')
    },
    // 表格选择项变化时触发事件
    selectionChange(selection) {
      this.selectId = []
      // 获取当前选择多少项
      this.currentSelect = selection.length
      this.$bus.$emit('siteSelectNum', this.currentSelect)
      selection.forEach((item) => {
        this.selectId.push(item.id)
      })
      console.log(this.selectId)
    },
    async getDeviceMonitorTable(pageNum = 1, pageSize = 10, siteName = '') {
      this.isLoading = true
      const { data } = await deviceMonitor({
        pageNum,
        pageSize,
        siteName
      })

      console.log(data)
      if (data.code === 0) {
        const tableData = data.data
        // 当前页码
        this.currentPage = tableData.currPage
        // 一页的条数
        this.pageSize = tableData.pageSize
        this.totalCount = tableData.totalCount
        this.totalPage = tableData.totalPage
        this.equipmentTableData = []
        tableData.list.forEach((item) => {
          this.equipmentTableData.push({ ...item })
        })
        this.isLoading = false
      } else {
        this.$message.error('获取表格数据失败')
      }
    },
    // 第一页
    firstPageClick() {
      if (this.isLoading) return
      this.getDeviceMonitorTable(1)
    },
    // 上一页
    previousPageClick() {
      if (this.isLoading) return
      this.getDeviceMonitorTable(this.currentPage - 1)
    },
    // 下一页
    nextPageClick() {
      if (this.isLoading) return
      this.getDeviceMonitorTable(this.currentPage + 1)
    },
    // 最后一页
    lastPageClick() {
      if (this.isLoading) return
      this.getDeviceMonitorTable(this.totalPage)
    },
    // 跳转页
    junkToOtherPage(page) {
      this.getDeviceMonitorTable(page, this.pageSize)
    }
  }
}
</script>

<style scoped>
/* 表格样式start */
.el-form-item >>> .el-form-item__label {
  color: #888888;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-textarea >>> .el-textarea__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

.el-link {
  display: inline-block;
  margin-right: 16px;
}

/* 表格选择框样式start */
.el-table >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

.el-table >>> .el-checkbox__inner::after {
  top: 3px;
  left: 6px;
}

.el-table >>> .el-checkbox__inner::before {
  top: 8px;
}
/* 表格选择框样式end */

/* 去掉switch外层的div溢出隐藏 */
.el-table >>> .cell {
  overflow: visible;
}

/* 设置switch的宽高边框 */
.el-switch >>> .el-switch__core {
  width: 28px !important;
  height: 14px;
  border: 2px solid #dddddd !important;
}

/* 设置switch圆形按钮的宽高边框位置 */
.el-switch >>> .el-switch__core:after {
  top: -4px;
  width: 14px;
  height: 14px;
  border: 2px solid #dddddd;
}

/* 设置switch圆形按钮的激活位置 */
.el-switch.is-checked >>> .el-switch__core::after {
  left: 106%;
}

/* 设置switch圆形按钮的关闭位置 */
.el-switch >>> .el-switch__core:after {
  left: -2px;
}

/* 表格样式end */
</style>
